<template>
  <div>
    <c-list :column="3" label-width="145px">
      <template v-if="hasNoArea">
        <c-list-item label="所选设计方案" :value="picDetail.selectedDesign || designDetail.selectedDesign" />
        <c-list-item label="设计申请业务类型" dict-type-code="BIZ_TYPE" :value="comDetail.applyBizType || picDetail.designBizType" />
        <c-list-item label="所选设计区域" :span="3" :value="applySpecialZoneName" />
      </template>
      <c-list-item label="全屋定制面积" suffix="m²" :value="comDetail.wholeHouseCustomizedArea" />
      <c-list-item label="软体面积" suffix="m²" :value="comDetail.softwareArea" />
      <c-list-item label="套房面积" suffix="m²" :value="comDetail.suiteArea" />
      <c-list-item label="整体橱柜面积" suffix="m²" :value="comDetail.wholeCabinetArea" />
      <c-list-item label="卫浴面积" suffix="m²" :value="comDetail.bathroomArea" />
      <c-list-item label="样板间面积" suffix="m²" :value="comDetail.sampleRoomArea" />
      <c-list-item label="情景间面积" suffix="m²" :value="comDetail.sceneArea" />
      <c-list-item label="公共区面积" suffix="m²" :value="comDetail.publicSpaceArea" />
      <c-list-item label="装修主材区面积" suffix="m²" :value="comDetail.furnishArea" />
      <!-- <c-list-item label="是否含换代特价区" dict-type-code="BOOLEANS" :value="comDetail.isSpecialDistrict" />
      <c-list-item label="换代特价区面积" suffix="m²" :value="comDetail.specialDistrictArea" /> -->
      <c-list-item label="卖场报图总面积" suffix="m²" :value="comDetail.shopTotalArea" />
    </c-list>
    <c-section v-if="hasReport" title="实际报图面积汇总">
      <c-list :column="3" label-width="145px">
        <c-list-item label="新业务面积汇总" suffix="m²" :value="comDetail.newBusinessAreaSummary" />
        <c-list-item label="软体区面积汇总" suffix="m²" :value="comDetail.softwareSumArea" />
        <c-list-item label="套房区面积汇总" suffix="m²" :value="comDetail.suiteSumArea" />
        <c-list-item label="公共区面积汇总" suffix="m²" :value="comDetail.publicSumArea" />
        <c-list-item label="门头面积汇总" suffix="m²" :value="comDetail.doorHeadPicArea" />
      </c-list>
    </c-section>
  </div>
</template>
<script>
// import { getConfigArea } from '@/api/shopDesignTask'
export default {
  name: 'Area',
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    picDetail: {
      type: Object,
      default: () => ({})
    },
    designDetail: {
      type: Object,
      default: () => ({})
    },
    hasNoArea: {
      type: Boolean,
      default: true
    },
    hasReport: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      applySpecialZoneName: ''
    }
  },
  computed: {
    comDetail() {
      // 1.若任务类型为“图纸触发”，则框内字段显示值为来源图纸对应的值；
      // 2.若任务类型不等于“图纸触发”，则框内字段显示值取设计基础信息表中的值；
      if (this.detail.taskType === 'DRAWING_TRIGGER') {
        return this.picDetail
      }
      return this.designDetail
    }
  },
  watch: {
    comDetail(v) {
      let da = v.applySpecialZone
      if (this.detail.taskType === 'DRAWING_TRIGGER') {
        da = v.designSpace
      }
      this.applySpecialZoneName = this.$getAreaName(da)
      // this.getAreaName(v.applySpecialZone)
    }
  },
  methods: {
    // getAreaName(applySpecialZone) {
    //   getConfigArea(applySpecialZone).then(res => {
    //     this.applySpecialZoneName = res.data.records.map(e => {
    //       return e.areaName
    //     }).join(',')
    //   })
    // }
  }
}
</script>
